<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test my idea</title>
     <script src="../jquery.js"></script>
    <script src="../browser.js"></script>
    <script src="../es6-module-loader.js"></script>
    <style>
        .viewer {
            position: relative;
            width: 512px;
            height: 512px;
            margin: 0 auto;
            
            background-color: black;
        }
        
        .viewer canvas {
            position: absolute;
            z-index: 1;
        }
        .viewer .annotations {
            position: absolute;
            z-index: 999;
            color: white;
            height: 100%;
            width: 100%;
        }
        .viewer .annotations span {
            position: absolute;
        }
        span.system-name {
            left: 0;
            top: 0;
        }
        span.exam {
            left: 0;
            top: 20px;
        }
        span.series{
            left: 0;
            top: 40px;
        }
        span.image-number{
            left: 0;
            top: 60px;
        }
        span.dfov{
            left: 0;
            top: 100px;
        }
        span.soft{
            left: 0;
            top: 120px;
        }
        span.kv{
            left: 0;
            bottom: 140px;
        }
        span.ma{
            left: 0;
            bottom: 120px;
        }
        span.noise-index{
            left: 0;
            bottom: 100px;
        }
        span.large-body{
            left: 0;
            bottom: 80px;
        }
        span.scan-parameters{
            left: 0;
            bottom: 60px;
        }
        span.tilt{
            left: 0;
            bottom: 40px;
        }
        span.time{
            left: 0;
            bottom: 20px;
        }
        span.ww-wc{
            left: 0;
            bottom: 0;
        }
        span.institution-name{
            right: 0;
            top: 0;
        }
        span.patient-name{
            right: 0;
            top: 25px;
        }
        span.patient-id{
            right: 0;
            top: 40px;
        }
        span.date{
            right: 0;
            top: 60px;
        }
        span.rows{
            right: 0;
            top: 80px;
        }
    </style>
    <script>
        
//        $(function() {
//                   var f = $("#file"), 
//                       b = $("#btn"),
//                       c = $("#myCanvas").get(0),
//                       ctx = c.getContext("2d"),
//                       r = new FileReader();
//
//                    r.onload = function() {
//                       var parser = new hc.dicom.Parser();   
//                         //var parser = new dwv.dicom.DicomParser();
//                        parser.parse(r.result);
//                        parser.putHtml5ImageDataTo(ctx);                
//                    };
//
//                    f.on("change", function() {
//                        var ff = f.get(0).files[0];
//                        r.readAsArrayBuffer(ff);
//                    });
//
//                });
        
         
       
        
    	System.transpiler = "babel";
    	System.babelOptions = {
	    	stage: 0
	    };
        System.import("./hc-dicom-parser.es6")
            .then(function(dicom) {
                "use strict";   
            
                $(function() {
                   let f = $("#file"), 
                       b = $("#btn"),
                       $c = $("#myCanvas"),
                       $anno = $c.siblings(".annotations"),
                       c = $c.get(0),
                       ctx = c.getContext("2d"),
                       r = new FileReader();
                    
                    var $sn = $(".system-name", $anno);

                    r.onload = function() {
                        let parser = new dicom.Parser();
                        
                        parser.windowCenter = 100;
                        parser.windowWidth = 100;
                        //parser.restoreWindowWidthAndWindowCenter();
                        
                        
                        parser.parse(r.result);
                        console.log(parser.toString());
                        
                        let imgData = parser.fillImageData(ctx.createImageData(512, 512));
                        ctx.putImageData(imgData, 0, 0);
                        let annotations = parser.annotations;
                        console.log(annotations.imageNumber);
                        //console.log(annotations);
                        $sn
                            .text(annotations.systemName)
                            .siblings(".exam").text(annotations.exam)
                            .siblings(".series").text(annotations.series)
                            .siblings(".dfov").text(annotations.dfov)
                            .siblings(".image-number").text(annotations.imageNumber)
                            .siblings(".soft").text(annotations.iterativeReconAnnotation)
                            .siblings(".kv").text(annotations.kv)
                            .siblings(".ma").text(annotations.ma)
                            .siblings(".noise-index").text(annotations.noiseIndex)
                            .siblings(".large-body").text(annotations.largeBody)
                            .siblings(".scan-parameters").text(annotations.scanParameters)
                            .siblings(".tilt").text(annotations.tilt)
                            .siblings(".time").text(annotations.time)
                            .siblings(".ww-wc").text(annotations.windowWidthAndWindowCenter)
                            .siblings(".institution-name").text(annotations.institutionName)
                            .siblings(".patient-name").text(annotations.patientName)
                            .siblings(".patient-id").text(annotations.patientID)
                            .siblings(".date").text(annotations.date)
                            .siblings(".rows").text(annotations.rows);
                        
                        
                    };

                    f.on("change", function() {
                        var ff = f.get(0).files[0];
                        r.readAsArrayBuffer(ff);
                    });

                });
        });
    </script>
</head>
<body>
    <input type="file" name="file" id="file">
    <button id="btn">me</button>
    <br>
    <div class="viewer">
        <canvas id="myCanvas" width="512" height="512">donot support canvas</canvas>
        <div class="annotations">
            <span class="system-name"></span>
            <span class="exam"></span>
            <span class="series"></span>
                        <span class="image-number"></span>

            <span class="dfov"></span>
            <span class="soft"></span>
            <span class="kv"></span>
            <span class="ma"></span>
            <span class="noise-index"></span>
            <span class="large-body"></span>
            <span class="scan-parameters"></span>
            <span class="tilt"></span>
            <span class="time"></span>
            <span class="ww-wc"></span>
            <span class="institution-name"></span>
            <span class="patient-name"></span>
            <span class="patient-id"></span>
            <span class="date"></span>
            <span class="rows"></span>
        </div>
    </div>
</body>
</html>